<template>
  <div class="home-right-center-wrapper">
    <comp-title :text="title"
      ref="compTitle"></comp-title>
    <div class="box-bg"
      ref="box">
      <ul class="manage-list">
        <li class="manage-item" v-for="(wave, index) in top5List ?top5List : []" :key="index">
          <wave :waveData='wave' :key="index"
            :ref='`wave${index+1}`'></wave>
        </li>
      </ul>
      <svg version="1.1"
        class="box-bd-bg"
        x="0px"
        y="0px"
        viewBox="0 0 420.8 13.4"
        style="enable-background:new 0 0 420.8 13.4;"
        xml:space="preserve">
        <path class="st0"
          d="M334.3,8.4h81v5h-86L334.3,8.4z" />
        <path class="st1"
          d="M0.3,0.4l13.5,11h311.5l5-6h90v5" />
      </svg>
    </div>

  </div>
</template>
<script>
import CompTitle from '../../../components/common/compTitle.vue'
import Wave from '../../../components/common/wave.vue'
import { mapState } from 'vuex'
import axios from 'axios'
// https://cn.vuejs.org/v2/style-guide/#组件-实例的选项的顺序-推荐
export default {
  name: 'rightCenterTop',
  components: { CompTitle, Wave },
  model: {},
  props: {},
  data() {
    return {
      title:'省份排名TOP5',
      top5List:[],
      colors: [["#035ef066", "#035ef0"],["#00f7fa66", "#00f7fa"], ["#00f7fa66", "#00f7fa"], ["#3CB371", "#2E8B57"], ["#808080", "#696969"]]
    }
  },
  computed: {
    ...mapState(['dataSet']),
    waveData() {
      return this.dataSet.rightCenterTop
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.getData()
  },
  beforeDestroy() {},
  methods: {
    getData() {
      var data = { 'account': '2020-06', 'tenant_id': 'uni099' ,'activity_type':'%' ,'type' : '0'}
      axios.post(apiUrl + 'api/bigscreen/getActivityEreaInfo', data).then(res => {
        if(res.data.length>5){
          this.top5List=res.data.slice(0,5);
        }else{
          this.top5List=res.data;
        }
        var total=0;
        for (var i=0 ; i < this.top5List.length; i++){
         total+=this.top5List[i].value;
        }
        for (var j=0 ; j < this.top5List.length; j++){
          this.top5List[j].percent=this.top5List[j].value/total;
          this.top5List[j].colors=this.colors[j];
        }

      }).catch(err => {
        console.log(err)
      })
    },
    init() {
      let tl = new TimelineMax({})
      let wave = app.partServer.getCompByTagName('wave'),
        len = wave.length
      let listLi = TweenMax.staggerTo('.manage-list li', 0.5, { opacity: 1 }, 0.2),
        box = TweenMax.to(this.$refs.box, 0.5, { opacity: 1 })
      tl.addLabel('start')
        .add(this.$refs.compTitle.init(), 'start+=0')
        .add(box, 'start+=0.3')
        .add(listLi, 'start+=0.3')
        .add(wave[0].init(), 'start+=0.6')
        .add(wave[1].init(), 'start+=0.9')
        .add(wave[2].init(), 'start+=1.2')
        .add(wave[3].init(), 'start+=1.5')
        .add(wave[4].init(), 'start+=1.8')
      return tl
    }
  }
}
</script>
<style lang="scss" scoped>
.home-right-center-wrapper {
  position: relative;

  width: 100%;
  height: 100%;
  .box-bg {
    height: calc(100% - 30px);

    background: linear-gradient(0deg, #035ef01a, transparent);

    opacity: 0;
  }
  .manage-list {
    display: flex;
    align-items: center;
    justify-content: space-around;

    padding-top: 15px;
    .manage-item {
      // opacity: 0;
      width:72px;
    }
  }
}
.st0 {
  fill: #00f7fa;
}
.st1 {
  fill: none;
  stroke: #00f7fa;
}
.box-bd-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>

